<template>
    <div class="editAddCoupon">
        <header>新增/编辑优惠券</header>
        <div class="contents">
            <div class="couponName common">
                <p style="width:200px;">优惠券名称：</p>
                <el-input v-model.trim="input1" placeholder="给优惠券请个名字"></el-input>
            </div>
            <div class="couponType common">
                <p>优惠券类型：</p>
                <el-select v-model="value1" placeholder="请选择" style="width:300px;">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="couponDate common">
                <p>选择有效日期：</p>
                <span>
                    <el-date-picker v-model="value2" type="daterange" :picker-options="pickerOptions2" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </span>
            </div>
            <div class="payFee common">
                <p>数量：</p>
                <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                <span style="margin-left:20px;">张</span>
            </div>
            <div class="payFee common">
                <p>支付金额/可抵用金额：</p>
                <el-input style="width:130px;" v-model.trim="input2" placeholder="说明"></el-input>
                <span style="margin-left:20px;">元</span>
            </div>
            <div class="sumLimit common">
                <p>满抵金额限制：</p>
                <div class="explain2">
                    <el-input style="width:130px;margin-top:48px;" v-model.trim="input3" placeholder="说明"></el-input>
                    <p>消费满该限制方可使用</p>
                </div>
                <span style="margin-left:-14px;">元</span>
            </div>
            <div class="useRange common">
                <p>适用范围：</p>
                <div class="selectedTags" v-if="tags.length>0">
                    <el-tag v-for="tag in tags" :key="tag.index" closable @close="handleClose(tag)" :type="tag.type">
                        {{tag.SUBJECT}}
                    </el-tag>
                </div>
                <el-button @click.native="selectRange" style="margin-left:30px;">选择范围</el-button>
            </div>
            <div class="explain common">
                <p>说明：</p>
                <el-input style="width:500px;" v-model.trim="input5" placeholder="说明"></el-input>
            </div>
            <div class="buttons common">
                <el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
                <el-button style="margin-left:20px;" @click.native="cancels">取消</el-button>
            </div>
        </div>
        <!--选择适用范围-->
        <el-dialog title="选择适用范围" :visible.sync="dialogs" width="75%">
            <div class="dialog_box">
                <div class="condition" style="display:none;">
                    <p>所属门店：</p>
                    <el-select v-model="value3" placeholder="请选择" style="width:300px;">
                        <el-option v-for="item in options3" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID">
                        </el-option>
                    </el-select>
                    <el-button type="danger" style="margin:0 0 0 45px;background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets">重置</el-button>
                </div>
                <div v-if="!noData" class="all_datas" v-loading="loading">
                    <div class="checkbox_explain" v-for="items in rangeDatas" :key="items.id">
                        <p>{{items.CLASS}}：</p>
                        <div class="all_checkbox" v-for="value in items.RANGEARR" :key="value.id">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :label="value" :key="value.SUBJECT">{{value.SUBJECT}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
                <div v-if="noData" class="no_data">暂无数据</div>
                <div class="two_btns">
                    <el-button @click.native="cancel2">取消</el-button>
                    <el-button type="primary" @click.native="ensures">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import qs from "qs";
import { getCookie } from "@/assets/js/cookie";
import { selectionRange } from "@/api/coupon";
import { get4SCafeShopList } from "@/api/market";
import { saveCashVolumeRecord } from "@/api/coupon";
export default {
  name: "editAddCoupon",
  data() {
    return {
      userID: "", //用户id
      input1: "", //优惠券名称
      value1: "", //优惠券类型
      options1: [
        {
          value: 1,
          label: "满减劵"
        },
        {
          value: 2,
          label: "兑换劵"
        },
        {
          value: 3,
          label: "服务券"
        },
        {
          value: 4,
          label: "N元劵"
        },
        {
          value: 5,
          label: "折扣劵"
        }
      ],
      value2: "", //优惠券有效日期
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      input2: "", //支付金额
      input3: "", //满抵金额限制
      tags: [], //适用范围
      input5: "", //说明
      dialogs: false, //是否显示选择适用范围
      value3: "", //所属门店
      options3: [], //所有门店
      rangeDatas: [], //券使用范围数据
      checkList: [], //已选checkbox
      loading: true,
      noData: false, //是否没数据
      num8: 1 //优惠券数量
    };
  },
  created() {
    this.userID = getCookie("userId");
    //所有4s门店
    get4SCafeShopList().then(res => {
      if (res.data.STATUS_CODE === 1) {
        this.options3 = res.data.SHOP_LIST;
      }
    });
  },
  methods: {
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    //选择范围
    selectRange() {
      if (this.value1 == "") {
        this.$alert("请选择优惠券类型", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      this.dialogs = true;
      let obj = {};
      this.userID ? (obj.USER_ID = this.userID) : null;
      obj.CATEGORY = this.value1;
      selectionRange(obj).then(res => {
        this.loading = true;
        this.noData = false;
        if (res.data.STATUS_CODE === 1) {
          this.loading = false;
          if (res.data.SELECTIONARR.length === 0) {
            this.noData = true;
            return false;
          }
          this.rangeDatas = res.data.SELECTIONARR;
        }
      });
    },
    //提交
    submits() {
      if (this.input1 == "") {
        this.$alert("请输入优惠券名称", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      if (this.value1 == "") {
        this.$alert("请选择优惠券类型", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      if (this.value2.length === 0) {
        this.$alert("请选择有效时间", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      if (this.input2 == "") {
        this.$alert("请输入可抵用金额", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      if (this.input3 == "") {
        this.$alert("请输入满抵金额限制", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      if (this.tags.length === 0) {
        this.$alert("请选择适用范围", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      let obj = {};
      let postObj = {};
      obj.USER_ID = this.userID; //用户id
      obj.SUBJECT = this.input1; //优惠券名称
      obj.CATEGORY = this.value1; //优惠券类型
      obj.STARTTIME = this.value2[0].getTime(); //有效开始时间
      obj.EXPTIME = this.value2[1].getTime(); //有效结束时间
      obj.AMOUNT = this.input2; //抵用金额
      obj.USABLEPRICE = this.input3; //使用金额
      let strr = "";
      for (let k = 0; k < this.tags.length; k++) {
        strr += this.tags[k]["SUBJECT"] + ",";
      }
      strr = strr.substring(0, strr.length - 1); //去掉最后一个逗号
      obj.USERANGE = strr; //适用范围
      this.input5 ? (obj.REMARK = this.input5) : null; //说明 可以为空
      postObj = qs.stringify(obj);
      let flagss = true; //防止重复提交
      if (flagss) {
        this.$axiosCK({
          url:
            window.getIps +
            "/4SCAFE/CashVolumeRecord/saveCashVolumeRecord.action",
          method: "post",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          },
          data: postObj
        }).then(res => {
          flagss = false;
          if (res.data.STATUS_CODE === 1) {
            flagss = true;
            this.$message({
              type: "success",
              message: "添加成功"
            });
            setTimeout(
              () =>
                this.$router.push({
                  path: "/functions/coupon"
                }),
              1500
            );
          }
        });
      }
    },
    //取消
    cancels() {
      this.$confirm("此操作将不会保存信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push({ path: "/functions/coupon" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    //确定
    ensures() {
      console.log(this.checkList);
      if (this.checkList.length === 0) {
        this.$alert("请选择适用范围", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      this.tags = this.checkList;
      this.dialogs = false;
    },
    //取消
    cancel2() {
      this.checkList = [];
      this.dialogs = false;
    },
    //查询
    querys() {
      if (this.value3) {
        this.rangeDatas = [];
      }
      let obj = {};
      this.value3 ? (obj.COMPID = this.value3) : null;
      obj.CATEGORY = this.value1;
      selectionRange(obj).then(res => {
        this.loading = true;
        this.noData = false;
        if (res.data.STATUS_CODE === 1) {
          this.loading = false;
          if (res.data.SELECTIONARR.length === 0) {
            this.noData = true;
            return false;
          }
          this.rangeDatas = res.data.SELECTIONARR;
        }
      });
    },
    // 更改优惠券数量
    handleChange(value) {
      console.log(value);
    },
    //重置
    resets() {
      this.value3 = "";
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.editAddCoupon {
  header {
    background: #fff;
    font-size: 22px;
    font-weight: 700;
    padding: 20px;
  }
  .contents {
    height: 800px;
    background: #fff;
    margin: 30px;
    padding-top: 60px;
    display: flex;
    flex-flow: column;
    align-items: center;
    p {
      white-space: nowrap;
      width: 165px;
      text-align: right;
    }
    .common {
      width: 50%;
      margin: 26px auto 0 auto;
      display: flex;
      align-items: center;
    }
    .sumLimit {
      margin-top: -20px;
      .explain2 {
        p {
          font-size: 14px;
          color: #a8a8a5;
          text-align: left;
        }
      }
    }
    .useRange {
      margin-top: 10px;
      .selectedTags {
        border: 1px solid #dcdfe6;
        padding: 8px;
      }
    }
    .buttons {
      width: 31%;
      display: flex;
    }
  }
  .dialog_box {
    width: 100%;
    border-top: 1px solid #f0f0f0;
    .condition {
      display: flex;
      align-items: center;
      padding: 25px 0 25px 25px;
      p {
        color: #000;
      }
    }
    .all_datas {
      .checkbox_explain {
        display: flex;
        flex-flow: wrap;
        align-items: center;
        padding: 30px 30px 0 30px;
        border-bottom: 1px solid #f0f0f0;
        p {
          width: 0;
          white-space: nowrap;
          color: #000;
          margin-top: -10px;
        }
        .all_checkbox {
          /* 主要控制这个样式 */
          margin: 0 0 22px 70px;
          width: 120px;
        }
      }
    }
    .no_data {
      text-align: center;
      margin-top: 30px;
    }
    .two_btns {
      padding: 10px 50px 0 0;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.el-dialog__body {
  padding: 0 !important;
}
.el-input-number {
  width: 100px;
}
</style>
